<template>
    <div class="m-controler" >
        <h2 class="title">{{parcel.shop_name}}</h2>
        <div class="m-btn"  @click="chooseShop"> <i class="el-icon-refresh"></i>更换门店</div>
      <div class="controler-box">
        <el-menu :default-active="defaultItem" class="el-menu-demo m-nav" mode="horizontal"  @select="handleSelect">
          <el-menu-item  v-for="(themeItem,ind) in parcel.themeList" :index="themeItem.theme_id" :key="themeItem.theme_id">{{themeItem.theme_name}}</el-menu-item>
        </el-menu>
        <div class="m-date">
          <el-date-picker
            v-model="date"
            type="date"
            placeholder="选择日期" @change="search(false)">
          </el-date-picker>
          <div class="m-btn" @click="search(false)"> <i class="el-icon-search"></i>查询</div>
        </div>
        <div class="m-date-list" v-if="parcel.dateList.length">
          <a class="list-btn pre" href="javascript:void(0);" @click="changeWeek('pre')" >前一周</a>
          <ul class="list-box">
            <li v-for="item in parcel.dateList" :class="['list-item',{'active':item.class}]" @click="changeData(item)">
              <div class="item-date">{{item.date}}</div>
              <div class="item-week">{{item.name}}</div>
              <div class="item-price">￥{{item.total}}</div>
            </li>
          </ul>
          <a class="list-btn next" href="javascript:void(0);" @click="changeWeek('next')">后一周</a>
        </div>
      </div>
    </div>
</template>

<script>
     const { Fetch } = require("@/common/fetch");
     import {tools} from "@/common/utils.js";

     export default {
        name: "controler",
        props:["parcel"],
        data(){
          return {
            date:tools.getParamFromUrl('date') || new Date(),
            themeId: '',
            week:0,
            init:false,
            dateList:[]
          }
        },
        computed:{
          defaultItem(){
            let id = this.parcel.themeList[0] && this.parcel.themeList[0].theme_id;
            this.themeId = this.themeId || id || '';
            return this.themeId;
          }
        },
        methods: {
          chooseShop() {
            this.$emit('upload')
          },
          handleSelect(key){
            this.themeId = key;
            this.search(false);
          },
          search(isFromWeek){
            let date = this.date && this.date.getFullYear()+'-'+(this.date.getMonth()+1)+'-'+this.date.getDate() ;
            let id = this.themeId;
            if(!isFromWeek){this.week = 0}
            this.$emit('searchDate',{
              date:date,
              theme_id:id,
              week:this.week
            })
          },
          changeWeek(type){
            if(type == 'pre'){
              this.week--;
            }else{
              this.week++;
            }
            this.search(true);
          },
          changeData(row){
            this.date = new Date(row.date);
            this.search();
          }
        },
        updated(){
          // if(!this.init){
          //   setTimeout(()=>{
          //     this.search();
          //   },100)
          //
          //   this.init = true;
          //
          // }

        }

    }
</script>

<style scoped lang = "scss">
.m-controler{
  .title {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #000000;
      letter-spacing: 0;
      display: inline-block;
      margin: 10px 0 27px;
      line-height: 1;
    }
  .m-btn{
      display: inline-block;
      background: #FFED8C;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #000000;
      letter-spacing: 0;
      border-radius: 100px;
      padding:5px 10px;
      cursor: pointer;
      margin-left:10px
    }

  .controler-box{
    background: #FFFFFF;
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);
  }
  .m-nav{
    margin:0 20px;
  }
  .el-menu--horizontal>.el-menu-item.is-active{
  border-bottom:4px solid #FFED8C;
}
  .m-date{
    padding:30px 20px;
  }
  .m-date-list{
    font-size:0;
    margin:0 20px;
    padding-bottom:30px;
    .list-btn{
      display: inline-block;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0;
      width:20px;
      padding:7px;
      position: relative;
      background: #4A4A4A;
      border-radius: 3px;
      text-align: center;
      &:after{
        position: absolute;
        top:50%;
        margin-top:-8px;
        font-size:0;
        line-height:0;
        border-width:7px 7px;
        border-style:solid;

        content:'';
      }
      &:hover{
        background: #FFED8C;
        color: #000000;
      }
    }
    .pre{
      margin-right: 15px;
      &:hover{
        &:after{
          border-color: #fff #FFED8C #fff #fff ;
        }
      }
      &:after{
        left:-14px;
        border-color: #fff #4A4A4A #fff #fff ;
      }
    }
    .next{
      margin-left:5px;
      &:hover{
        &:after{
          border-color: #fff #fff #fff #FFED8C;
        }
      }
      &:after{
        right:-14px;
        border-color: #fff #fff #fff #4A4A4A;

      }
    }

    .list-box{
      display: inline-block;

      .list-item{
        display: inline-block;
        background: #FFFFFF;
        border: 1px solid #BFBFBF;
        border-radius: 3px;
        padding:6px 14px;
        margin-right:10px;
        cursor: pointer;
        .item{
          &-date{
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #666666;
            letter-spacing: 0;
            line-height: 17px;
          }
          &-week{
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #666666;
            letter-spacing: 0;
            line-height: 20px;
            text-align: center;
          }
          &-price{
            font-family: PingFangSC-Medium;
            font-size: 20px;
            color: #FF679E;
            letter-spacing: 0;
            text-align: center;
            line-height: 28px;
          }
        }
      }
      .active{
        background-image: linear-gradient(-270deg, #FF509F 0%, #FF869B 100%, #F76B1C 100%);
        .item{
          &-date,&-week{
            opacity: 0.6;
            color: #fff;
          }
          &-price{
            color: #FFFFFF;
          }
        }
      }
    }
  }
}
</style>
